document.write('<link rel="stylesheet" type="text/css" href="'+baseUrl()+'/styles/epiceditor.css">');
function baseUrl(){
  return location.protocol+"//"+location.host+'/rukanhitokiri/js/base/epicEditor';
  //return location.protocol+"//"+location.host+'/js/base/epicEditor';
};
function $(){
  var elements=[];
  for(var i=0;i<arguments.length;i++){
	var element=arguments[i];
	if(typeof element=='string')
	  element=document.getElementById(element);
	if(arguments.length==1)
	  return element;
	elements.push(element);
  }
  return elements;
};
function getParentByTag(o,t){
  var p=o.parentNode;
  while(p.nodeName!=t.toUpperCase()){
    p=p.parentNode;
    if(p==null)break;
  }
  return p;//o||null
};
// Đăng ký sự kiện
function addEvent(elmId, evType, fn) {
	var elm = $(elmId);
	if (elm != null){
	  if (elm.addEventListener) {
	    elm.addEventListener(evType, new Function(fn), false);
		return true;
	  } else if(elm.attachEvent) {	// IE
	    var r = elm.attachEvent('on' + evType, new Function(fn));
		return r;
	  } else {
		alert("Handler could not be attached");
	  }
	}
}
 // Tìm vị trí
function pos(elm) {
    for( var posX = 0, posY = 0; elm; elm = elm.offsetParent ) {
      posX += elm.offsetLeft;
      posY += elm.offsetTop;
    }
    return {x: posX, y: posY};
}
// Trả về trinh duyệt tương ứng
function getNavigator() { 
  var bUserAgent = navigator.userAgent.toLowerCase();
  if (bUserAgent.indexOf('msie') > 0) {
    return 'msie';
  } else if (bUserAgent.indexOf('opera') == 0) {
    return 'opera';
  } else if (bUserAgent.indexOf('safari') > 0) {
    if(bUserAgent.indexOf('chrome') == -1) {
      return 'safari';
	} else {
	  return 'chrome';
	}
  } else {
    return 'firefox';
  }
}
var nav = getNavigator();
var isIE = (nav == 'msie') ? true : false;
var isMz = (nav == 'firefox') ? true : false;
var isOp = (nav == 'opera') ? true : false;
var isGC = (nav == 'chrome') ? true : false;
var isSa = (nav == 'safari') ? true : false;
  
var epicEditor = {
  // editor general
  containId: '',				// Id của phần tử chứa editor sẽ được thiết lập từ bên ngoài
  iframeId: 'epic_iframe',		// Id của iframe
  UI: {},						// Đối tượng iframe
  ed: {},						// Đối tượng document của iframe
  is: 'epicEditor',				// Tên đối tượng được tạo ra (epicEditor = new Editor())		
  width: 1094,					// Chiều rộng của editor			
  height: 180,					// Chiều cao của editor
  defaultContent: '',			// Nội dung mặc định khi hiển thị editor
  backgroundColor: '', 			// Màu nền cho khu vực chỉnh sửa văn bản
  hasDropdown: false,			// Xác định tồn tại hay không dropdown
  // toolbar
  toolbarId: 'epic_toolbar_group',				// Id của toolbar
  iconPath: baseUrl()+'/images/classic',					// Đường dẫn đến các icon cho toolbar
  toolbarColor: '', 							// Màu nền cho khu vực các nút chỉnh sửa văn bản 
  buttons: {
	"buttons1": [],								// Danh sách các nút được hiển thị
	"buttons2": []								// Danh sách các nút được hiển thị trên hàng thứ 2
  },
  fontSize: [
	['1','10'], ['2','13'], ['3','16'], ['4','18'], ['5','24'], ['6','32'], ['7','48'],
  ],
  fontName: [
	'Courier', 'Courier New', 'Times New Roman', 'Tahoma', 'Verdana', 'Georgia', 'Cursive', 'Fixedsys', 'Impact', 'Serif', 'Sans-Serif', 'Elephant'
  ],
  colors: [
	['#000000','Black'],
	['#A0522D','Sienna'],
	['#556B2F','Dark Olive Green'],
	['#006400','Dark Green'],
	['#483D8B','Dark Slate Blue'],
	['#000080','Navy'],
	['#4B0082','Indigo'],
	['#2F4F4F','Dark Slate Gray'],
	['#8B0000','Dark Red'],
	['#FF8C00','Dark Orange'],
	['#808000','Olive'],
	['#008000','Green'],
	['#008080','Teal'],
	['#0000FF','Blue'],
	['#708090','Slate Gray'],
	['#696969','Dim Gray'],
	['#FF0000','Red'],
	['#F4A460','Sandy Brown'],
	['#9ACD32','Yellow Green'],
	['#2E8B57','Sea Green'],
	['#48D1CC','Medium Turquoise'],
	['#4169E1','RoyalBlue'],
	['#800080','Purple'],
	['#808080','Gray'],
	['#FF00FF','Magenta'],
	['#FFA500','Orange'],
	['#FFFF00','Yellow'],
	['#00FF00','Lime'],
	['#00FFFF','Cyan'],
	['#00BFFF','Deep SkyBlue'],
	['#9932CC','Dark Orchid'],
	['#C0C0C0','Silver'],
	['#FFC0CB','Pink'],
	['#F5DEB3','Wheat'],
	['#FFFACD','Lemon Chiffon'],
	['#98FB98','Pale Green'],
	['#AFEEEE','Pale Turquoise'],
	['#ADD8E6','Light Blue'],
	['#DDA0DD','Plum'],
	['#FFFFFF','White'],
	['#DDA0DD','Plum'],
	['#FFFFFF','White']
  ],
  toolbarList: {
    // Tên                  Id cho nút           	Tiêu đề           	        Icon                    	Function
	"bold": 				['btnBold', 			'Đậm', 						'bold.png', 				'exc("bold")'],
	"italic": 				['btnItalic', 			'Nghiêng', 					'italic.png', 				'exc("italic")'],
	"underline": 			['btnUnderline', 		'Gạch chân', 				'underline.png', 			'exc("underline")'],
	"strikethrough": 		['btnStrikethrough', 	'Gạch ngang', 				'strike_trough.png', 		'exc("strikethrough")'],
	"undo": 				['btnundo', 			'undo', 					'undo.png', 				'exc("undo")'],
	"redo": 				['btnredo', 			'redo', 					'redo.png', 				'exc("redo")'],
	"fontsize": 			['btnFontsize', 		'Cỡ chữ', 					'fontsize.gif', 			'fs()'],
	"fontname": 			['btnFontname', 		'Kiểu chữ', 				'fontface.gif', 			'fn()'],
	"forecolor": 			['btnForecolor', 		'Màu chữ', 					'fontcolor.png', 			'fc(1)'],
	"hilitecolor": 			['btnHilitecolor', 		'Màu nền chữ', 				'hilightcolor.png', 		'fc(2)'],
	"backcolor": 			['btnBackcolor', 		'Màu nền', 					'backcolor.png', 			'bc()'],
	"superscript": 			['btnSuperscript', 		'Chữ nhô lên', 				'superscript.png', 			'exc("superscript")'],
	"subscript": 			['btnSubscript', 		'Chữ thụt xuống', 			'subscript.png', 			'exc("subscript")'],
	"createLink": 			['btnCreateLink', 		'Chèn đường dẫn', 			'insert_link.png', 			'addLink()'],
	"unlink": 				['btnUnlink', 			'Bỏ đường dẫn', 			'remove_link.png', 			'exc("unlink")'],
	"insertimage": 			['btnInsertImage', 		'Chèn ảnh', 				'image.png', 				'insertImage()'],
	"justifyleft": 			['btnAlignLeft', 		'Căn trái', 				'align_left.png', 			'exc("justifyleft")'],
	"justifycenter": 		['btnAlignCenter', 		'Căn giữa', 				'align_center.png', 		'exc("justifycenter")'],
	"justifyright": 		['btnAlignRight', 		'Căn phải', 				'align_right.png', 			'exc("justifyright")'],
	"justifyfull": 			['btnAlignJustify', 	'Căn lại', 					'align_justify.png', 		'exc("justifyfull")'],
	"insertorderedlist": 	['btnOrderedList', 		'Danh sách có thứ tụ', 		'numbered_list.png', 		'exc("insertorderedlist")'],
	"insertunorderedlist": 	['btnBulletedList', 	'Danh sách không thứ tự', 	'bulleted_list.png', 	    'exc("insertunorderedlist")'],
	"indent": 				['btnIndentMore', 		'Thụt lề', 					'increase_indent.png', 		'exc("indent")'],
	"outdent": 				['btnOutdentMore', 		'Trở lại thụt lề', 			'decrease_indent.png', 		'exc("outdent")'],
	"removeformat": 		['btnUnformat', 		'Bỏ định dạng', 			'remove_format.png', 		'unformat()'],
	"delete": 				['btnDelete', 			'Xóa', 						'delete.png', 				'exc("delete")'],
	"increasefontsize": 	['btnIncrease', 		'Tăng cỡ chữ', 				'increase.png', 			'exc("increasefontsize")'],
	"decreasefontsize": 	['btnDecrease', 		'Giảm cỡ chữ', 				'decrease.png', 			'exc("decreasefontsize")'],
	"inserthtml": 			['btnInserthtml', 		'Mã Html', 					'html.png', 				'exc("inserthtml", prompt("HTML?"))'],
	"source": 				['btnSource', 			'source', 					'source.png', 				'touggle()'],
	"horizontalrule": 		['btnHr', 			    'Đường kẻ ngang', 			'hr.png', 					'exc("inserthorizontalrule")']
  },
   
  // Khởi tạo các thông số cần thiết cho editor
  init: function(jsonObj) {
    for(var prop in jsonObj){
      if(jsonObj.hasOwnProperty(prop)){
	    if(prop=='buttons1')this.buttons.buttons1=jsonObj[prop].split(",");
		else if(prop=='buttons2')this.buttons.buttons2=jsonObj[prop].split(",");
		else this[prop]=jsonObj[prop];
	  }
    }
    this.display(); //setTimeout(new Function(this.is+'.display()'),100);
	// Lắng nghe sự kiện submit form
	getParentByTag($("content"),'form').addEventListener('submit', this.submitForm, false);
    // If a script calls someForm.submit(), the onsubmit event does not fire, so we need to redefine the submit method of the HTMLFormElement class.
    HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
    HTMLFormElement.prototype.submit = this.submitForm;
  },
  // Thực thi câu lệnh với javascript
  exc: function(command, value) {
    if (this.ed.queryCommandEnabled(command)) {
	  if (!value) { 
		value = null; 
	  }
	  this.ed.execCommand(command, false, value);
    }
  },
  // Khởi tạo danh sách toolbar
  initToolbar: function() {
    var t = '';
	for (var prop in this.buttons) {
	  var buttons = this.buttons[prop];
	  t += '<table cellspacing="0" cellpadding="0"><tbody><tr>';
	  for (var key in buttons) {
	    t += '<td><a id="' + this.toolbarList[buttons[key]][0] + '" href="javascript:void(0)" class="epic_button"><img class="epic_icon" src="' 
	      + this.iconPath + '/' + this.toolbarList[buttons[key]][2] + '" title="' + this.toolbarList[buttons[key]][1] + '"></a></td>';
	  }
	  t+='</tr></tbody></table>';
	}
	$(this.toolbarId).innerHTML = t;
	// Đăng ký sự kiện cho các button
	for (var prop in this.buttons) {
	  var buttons = this.buttons[prop];
	  for (var key in buttons) {
	    addEvent(this.toolbarList[buttons[key]][0], 'click', this.is + '.removeDropdown()');
        addEvent(this.toolbarList[buttons[key]][0], 'click', this.is + '.' + this.toolbarList[buttons[key]][3]);
	  }
	}
  },
  // display editor
  display: function(){
	var c='<table class="epic_layout" cellpadding="0" cellspacing="0"'+((this.backgroundColor!='')?'style="background-color:'+this.backgroundColor+';"':'')+'><tbody><tr><td class="epic_toolbar"'+((this.toolbarColor!='')?'style="background-color:'+this.toolbarColor+';"':'')+'><span id="epic_toolbar_panel" style="position:relative;"></span><span id="'+this.toolbarId+'"></span></td></tr><tr><td id="epic_content"><iframe id="'+this.iframeId+'"frameborder="0" style="width:'+this.width+'px;height:'+this.height+'px;"></iframe></td></tr></tbody></table>';
	var span=document.createElement("span");
	with(span){setAttribute("id","epic_pnk");innerHTML=c;}
	var con = $(this.containId);
	con.style.display='none';
	con.parentNode.insertBefore(span,con.nextSibling);
	this.initToolbar();
	
	this.UI=$(this.iframeId).contentWindow;
    this.ed=this.UI.document;
    this.defaultContent=$(this.containId).textContent||$(this.containId).innerText;
    if(this.defaultContent===undefined)this.defaultContent='';
    with(this.ed){designMode='On';open();write('<html><head></head><body>'+this.defaultContent+'</body></html>');close();}
	this.UI.focus();	// focus vào editor
  },
  // Trả lại định dạng ban đầu
  unformat: function() {
      this.exc('unlink');
	  this.exc('removeformat');
  },
  // Chèn đường dẫn
  addLink: function() {
    var aLink = prompt('Nhập địa chỉ đường dẫn URL:', '');
    if (aLink) {
      this.exc('CreateLink', aLink);
    }
  },
  // Chèn ảnh
  insertImage: function(url) {
	this.UI.focus(); // cần cho IE
	var aLink = (url == null) ? prompt('Nhập vào đương dẫn URL cho ảnh :', '') : url;
	if (aLink) {
      this.exc('InsertImage', aLink);
	}
  },
  touggle: function() {
	  
//	   // while (e.hasChildNodes()) {
//	    	alert('aaaaaaaaaaaaaaaa');
//	        e.removeChild(e.firstChild);
	   // }
	   alert(document.getElementsByTagName("iframe"));
		var deldrop = document.createElement('textarea');
		deldrop.id='epic_iframe';
		deldrop.style.width=this.width+'px';
		deldrop.style.height=this.height+'px';
		deldrop.innerHTML = $('epic_iframe').contentWindow.document.body.innerHTML;
		
		$("epic_content").removeChild($("epic_content").firstChild);
		
		$('epic_content').appendChild(deldrop);
	  //$('content').value = 
	  //var divs = $('epic_iframe').contentWindow.document.body.innerHTML;
	  //$(this.containId).removeAttribute("style");
	  //$('epic_pnk').style.display='none';
	  //$('epic_content').innerText = 'sdfsf';//$('content').textContent

  },
  // Thay đổ màu chữ hoặc màu nền
  bc: function() {
	var s = '<table cellspacing="0" cellpadding="0"><tbody>';
	var m=0;
	for(var i=0;i<5;i++){
	  s+='<tr>';
      for(var j=0;j<8;j++){
		s+='<td><div style="height:16px;width:16px;cursor:pointer;cursor:hand;margin: 3px 3px;background-color:'+this.colors[m][0]+';" onclick="'+this.is+'.removeDropdown();'+this.is+'.exc(\'backcolor\',\''+this.colors[m][0]+'\');">&nbsp;</div></td>';
		m++;
	  }
	  s+='</tr>';
	}
	s+='</tbody></table>';
	this.dropdown('btnBackcolor',s);
  },
  // Thay đổ màu chữ hoặc màu nền cho chữ
  fc: function(n) {
	var s = '<table cellspacing="0" cellpadding="0"><tbody>';
	var m=0;
	for(var i=0;i<5;i++){
	  s+='<tr>';
      for(var j=0;j<8;j++){
		s+='<td><div style="height:16px;width:16px;cursor:pointer;cursor:hand;margin: 3px 3px;background-color:'+this.colors[m][0]+';" onclick="'+this.is+'.removeDropdown();'+this.is+'.exc(\''+(n==1?'forecolor':'hilitecolor')+'\',\''+this.colors[m][0]+'\');">&nbsp;</div></td>';
		m++;
	  }
	  s+='</tr>';
	}
	s+='</tbody></table>';
	this.dropdown((n==1?'btnForecolor':'btnHilitecolor'),s);
  },
  // Thay đổi cỡ chữ
  fs: function() {
	var s = '<table cellpadding="0" cellspacing="0"><tbody>';
	for(var i = 0; i < this.fontSize.length; i++) {
	  s+='<tr><td><div style="text-align:center;cursor:pointer;cursor:hand;" onclick="'+this.is+'.removeDropdown();'+this.is +'.exc(\'fontsize\',\''+this.fontSize[i]+'\');"><font class="item" size="'+this.fontSize[i]+'">'+this.fontSize[i][1]+'</font></div></td></tr>';
	}
	s += '</tbody></table>';
	this.dropdown('btnFontsize', s);
  },
  // Thay đổi kiểu chữ
  fn: function() {
	var s = '<table cellpadding="0" cellspacing="0"><tbody>';
	for(var i = 0; i < this.fontName.length; i++) {
	  s += '<tr><td><div style="text-align:center;cursor:pointer;cursor:hand;" onclick="' + this.is + '.removeDropdown();' + this.is + '.exc(\'fontname\',\'' + this.fontName[i] + '\');"><font class="item" face="' + this.fontName[i] + '">' + this.fontName[i] + '</font></div></td></tr>';
	}
	s += '</tbody></table>';
	this.dropdown('btnFontname', s);
  },
  // Tạo dropdow cho cỡ chữ
  dropdown: function(elm, s) {
	// Tạo phần tử div
	var div = document.createElement('div');
	with(div.style){position='absolute';padding='2px';border='1px solid #CCCCCC';background='#ffffff';top='34px';left='0px';zIndex='3';}
	// Tạo phần tử span
	var span = document.createElement('span');
	with(span){id='epic_dropdown';style.position='relative';}
	
	$(elm).parentNode.insertBefore(span, $(elm).parentNode.firstChild);
	$(span).appendChild(div);
	div.innerHTML = s;
	this.hasDropdown = true;
	// Tạo khu vực click xoá dropdown
	var deldrop = document.createElement('div');
	deldrop.id='area_del';
	with(deldrop.style){position = 'absolute';padding='0px';top=pos($(this.iframeId)).y-pos($(this.toolbarId)).y+'px';left='0px';zIndex='2';width=this.width+'px';height=this.height+'px';}
	$('epic_toolbar_panel').appendChild(deldrop);
	addEvent('area_del','click',this.is+'.removeDropdown()');
  },
  // Xóa dropdown
  removeDropdown: function() { 
    if (this.hasDropdown) {
	  $('epic_toolbar_panel').removeChild($('area_del'));
	  $('epic_dropdown').parentNode.removeChild($('epic_dropdown'));
	  this.hasDropdown = false;
	}
  },
  // Thêm một nút mới trên thanh toolbar
  addButton: function(n, id, t, ic, fn) {
	this.toolbarList.manageimage = new Array(id, t, ic, fn);
	//this.ltb()
  },
  // Bắt sự kiện submit form
  submitForm: function(event){
	$('content').value = $('epic_iframe').contentWindow.document.body.innerHTML;
	this._submit();
  }
};

epicEditor.addButton('manageimage','btnManageImage','Xử lý ảnh','insert_image.png','popup()');
epicEditor.popup=function(){
  var w=600,h=350,left=(screen.width/2)-(w/2),top=(screen.height/2)-(h/2);
  var url=baseUrl()+'/plugins/imagemanager/index.php';
  targetWin=window.open(url,'manage images','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
  if(window.focus)targetWin.focus();
  return false;
};
